<template>
  <el-pagination
    :current-page="pageNumber"
    :page-size="pageSize"
    :total="total"
    @current-change="handlePageChange"
    @size-change="handleSizeChange"
    layout="total, sizes, prev, pager, next"
    :page-sizes="[10, 20, 50, 100]"
  />
</template>

<script lang="ts" setup>
const props = defineProps({
  pageNumber: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 20
  },
  total: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(["getList"])

const handlePageChange = (newPage: number) => {
  emit("getList", { pageNumber: newPage, pageSize: props.pageSize })
}

const handleSizeChange = (newSize: number) => {
  emit("getList", { pageNumber: props.pageNumber, pageSize: newSize })
}
</script>

<style scoped></style>
